<template>
  <a-modal v-bind:visible="isShowSearch" width="80%" title="交易状态详情" @cancel="onCancel" :footer="null">
    <a-spin :spinning="loading">
      <a-table
        style="width: 100%; height: 100%"
        size="small"
        :columns="columns"
        :data-source="data"
        :pagination="false"
        bordered
      >
      </a-table>
    </a-spin>
  </a-modal>
</template>

<script>
import { getStatusAPI } from '@/api/userinfo.js'
export default {
  name: 'Search',
  props: {
    isShowSearch: {
      type: Boolean,
      default: false
    },
    viewId: {
      type: Number,
      default: undefined
    }
  },
  watch: {
    async isShowSearch(Boolean) {
      if (Boolean) {
        try {
          this.loading = true
          const { data } = await getStatusAPI({ id: this.viewId })
          this.data = data
        } catch (err) {
          this.$message.error(err.response.data.msg)
        } finally {
          this.loading = false
        }
      }
    }
  },
  data() {
    return {
      loading: false,
      columns: [
        {
          title: '月份',
          dataIndex: 'date',
          align: 'center'
        },
        {
          title: '个人总代还',
          dataIndex: 'self_repay',
          align: 'center'
        },
        {
          title: '个人普通代还',
          dataIndex: 'self_normal',
          align: 'center'
        },
        {
          title: '个人空卡代还',
          dataIndex: 'self_empty',
          align: 'center'
        },
        {
          title: '个人快捷',
          dataIndex: 'self_collection',
          align: 'center'
        },
        {
          title: '直推总代还',
          dataIndex: 'direct_repay',
          align: 'center'
        },
        {
          title: '直推普通代还',
          dataIndex: 'direct_normal',
          align: 'center'
        },
        {
          title: '直推空卡代还',
          dataIndex: 'self_empty',
          align: 'center'
        },
        {
          title: '直推快捷',
          dataIndex: 'direct_collection',
          align: 'center'
        },
        {
          title: '团队总代还',
          dataIndex: 'team_repay',
          align: 'center'
        },
        {
          title: '团队普通代还',
          dataIndex: 'team_normal',
          align: 'center'
        },
        {
          title: '团队空卡代还',
          dataIndex: 'team_empty',
          align: 'center'
        },
        {
          title: '团队快捷',
          dataIndex: 'team_collection',
          align: 'center'
        },
        {
          title: '直推购买等级',
          dataIndex: 'direct_level_order',
          align: 'center'
        }
      ],

      data: []
    }
  },
  methods: {
    onCancel() {
      this.$emit('update:isShowSearch', false)
      this.$emit('update:viewId', undefined)
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .ant-table-body {
  font-size: 13px;
}
/deep/ .ant-table-wrapper::-webkit-scrollbar {
  width: 5px;
  height: 6px;
}

/deep/ .ant-table-wrapper::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background: #1890ff;
}

/deep/ .ant-table-wrapper::-webkit-scrollbar-track {
  border-radius: 1px;
  background: #f1f1f1;
}
</style>
